<!DOCTYPE html>
<html>

<head>
    <title>SVG Demo 4</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        div {
            float: left;
        }
    </style>
</head>

<body>
    <h1>Demo4：圆形和椭圆形</h1>
    <h2>circle and ellipse</h2>
    <div style="width: 200px;height:200px;stroke: red">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <circle r="30" cx="60" cy="60" fill="#F9F38C" stroke="#D07735" stroke-width="5"></circle>
        </svg>
    </div>
    <div style="width: 200px;height:200px;stroke: red">
        <svg width="100%" height="100%" viewBox="0,0,120,120" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <ellipse cx="60" cy="60" rx="50" ry="30" fill="#F9F38C" stroke="#D07735" stroke-width="5" />
        </svg>
    </div>

</body>

</html>